<!--  -->
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width:150px;">
                                <el-input v-model="formInline.buyer" placeholder="买家ID" />
                            </el-form-item>
                            <el-form-item style="width:150px;">
                                <el-input v-model="formInline.seller" placeholder="卖家ID" />
                            </el-form-item>
                            <!-- <el-form-item style="width:100px;">
                                        <el-select v-model="formInline.zh" placeholder="文件状态">
                                            <el-option label="未上架" value="noup" />
                                            <el-option label="已上架" value="yup" />
                                            <el-option label="预售中" value="booking" />
                                            <el-option label="出售中" value="saleing" />
                                            <el-option label="已售罄" value="done" />
                                        </el-select>
                                    </el-form-item> -->

                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- <button class="add">新增</button> -->
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container>
                        <el-header class="bottom-header">

                            <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                                :header-cell-style="{ background: '#EFF0FD', color: '#606266' }">
                                <el-table-column label="ID" prop="id" width="50" />
                                <el-table-column label="订单编号" prop="ordersid" width="150" />
                                <el-table-column label="订单信息" prop="cname" width="200" />
                                <el-table-column label="交易金额" prop="oprice" width="200" />
                                <el-table-column label="买家ID" prop="usernameby" width="120" />

                                <el-table-column prop="usernamesell" label="卖家ID" width="120" />

                                <el-table-column prop="ordertime" label="下单时间" width="220" />
                            </el-table>
                        </el-header>
                        <div class="bar">
                            <span>总计 <span class="number">{{ formInline.count }}</span> 条数据</span>
                            <el-pagination :page-size="formInline.pageSize"
                                v-model:current-page="formInline.currentPage" layout="prev, pager, next"
                                :total=formInline.count @current-change="select()" />
                        </div>
                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'MarketOrders',

    data() {
        return {
            formInline: {
                buyer: '',
                seller: '',
                currentPage: 1,
                pageSize: 3,
                count: 0,
            },
            tableData: [],


        };
    },

    mounted() {
        const that = this
        this.$http.get("marketorders/selectByCondition", that.formInline)
            .then((response) => {
                console.log(response.data.records);
                that.tableData = response.data.records;
                that.formInline.count = response.data.count;
                that.formInline.pageSize = response.data.pageSize;
                for (let i = 0; i < this.tableData.length; i++) {
                    console.log(that.tableData[i].ordertime);
                    that.tableData[i].ordertime = new Date(that.tableData[i].ordertime).toJSON().replace(/T|Z|(\.\D{3})/g, " ").trim();
                }
            })
        console.log(that.tableData);
    },

    methods: {
        reset() {
            this.formInline = {
                works: '',
                type: '',
                zh: '',
                count: response.data.count
            }
        }
    },

};
</script>

<style lang="css" scoped>
.el-main {
    padding: 0 !important;
}

.el-header {
    height: 50px;

}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar > span {
    margin-top: 16px;
    display: inline-block;

}

.add {
    height: 33px;
    margin-left: 300px;
    width: 60px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: red;
    cursor: pointer;
}

.add:hover {
    background-color: rgb(242, 85, 85);
}
</style>